<template>
  <v-container>
    <v-toolbar flat color="white">
      <v-toolbar-title>车位状态</v-toolbar-title>
    </v-toolbar>
    <v-divider></v-divider>
    <v-data-table
      :headers="headers"
      :items="parkings"
      class="elevation-1"
      :rows-per-page-items="[7]"
    >
      <template v-slot:no-data>
        <v-alert :value="true" color="error" icon="warning">
          暂无车位状态数据 :(
        </v-alert>
      </template>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.no }}</td>
        <td class="text-xs-left">{{ props.item.cam }}</td>
        <td class="text-xs-left">{{ props.item.pno }}</td>
        <td class="text-xs-left">{{ props.item.status ? "正在使用" : "空闲" }}</td>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      headers: [
        {
          text: "序号",
          align: "left",
          sortable: true,
          value: "no"
        },
        { text: "摄像头编号", value: "cam" },
        { text: "车位序号", value: "pno" },
        { text: "状态", value: "status", sortable: false }
      ]
    };
  },

  computed: {
    ...mapState("parkingmonitor", { parkings: "parkingItems" })
  }
};
</script>

